<template>

  <div>
    <el-carousel trigger="click" type="card" height="420px">          
        <el-carousel-item 
          v-for="image in bannerList" 
          :key="image" 
          style="display: flex;align-items: center;justify-content: center;">
          <img
            style="width: 700px; height: 420px;border-radius: 10px;"
            :src="image.imageUrl"
            :fit="fit"/>
        </el-carousel-item>
      </el-carousel>

  </div>
</template>

<script>
import bannerAPI from "@/api/cms/banner";
import indexAPI from "@/api/index";

export default {
  data() {
    return {
      swiperOption: {
        //自动切换幻灯片
        autoplay: true,
        //切换速度
        speed: 300,
        //配置分页
        pagination: {
          //分页的dom节点
          el: ".swiper-pagination",
        },
        //配置导航
        navigation: {
          nextEl: ".swiper-button-next", //下一页dom节点
          prevEl: ".swiper-button-prev", //前一页dom节点
        },
      },
      //banner数组
      bannerList: [],
    };
  },
  created() {
    // 获取banner信息
    this.getBannerList();

  },
  methods: {
    // 获取Banner列表
    getBannerList() {
      bannerAPI.getAllBanner().then((response) => {
        this.bannerList = response.data;
      });
    },
  },
};
</script>

<style scoped>
.bannerHeight {
  height: 500px;
}
.bg-red {
  background: red;
}
.cc-l-wrap {
  width: 267.5px;
  height: 220px;
}
.i-teach-wrap {
  width: 267.5px;
  height: 330px;
}
</style>
